<template>
    <div class="page_index index_banner" :style="{ backgroundImage: 'url(' + indexbg + ')' }">
        <el-row style="height: 100%">
            <el-col :span="14" style="height: 100%;
    align-content: center;">
                <div>
                    <div style="font-size: 30px;color:#fff;">
                        <img src="../../assets/logoVWhite.png" style="width: 200px;"
                            @click="() => { this.$router.push('/') }" />
                    </div>
                    <div style="font-size: 20px;color:#fff;margin-top: 50px;">
                        AI心理测评时代领航者
                    </div>
                </div>
            </el-col>
            <el-col :span="10">
                <div style="background-color: #ffffff99;height: 100%;
    align-content: center;">
                    <div style="padding:50px">
                        <el-card style="">
                            <div style="padding:20px">
                                <div style="text-align: left;">
                                    <h3>登录含光AI心理测评</h3>
                                </div>
                                <el-form label-position="top">
                                    <el-form-item label="账号">
                                        <el-input v-model="form.userName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码">
                                        <el-input type="password" v-model="form.password" @keyup.enter="login"></el-input>
                                    </el-form-item>
                                    <el-form-item label="">
                                        <el-button type="primary" @click="login" >登录</el-button>
                                        <el-button link
                                            @click="() => { this.$router.push('/register') }">没有账号？前往注册</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>

                        </el-card>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import indexbg from '../../assets/bg.jpg'
import { POST } from '../../util/axios.js'
import { useUserStore } from "../../store/userStore.js";
export default {
    data() {
        return {
            indexbg: indexbg,
            form: { userName: "", password: "" }
        }
    },
    methods: {
        async login() {
            let rs = await POST('/user/login', 'POST', this.form, true)
            console.log("登陆结果:::", rs)
            if (rs.code == 200) {
                const userStore = useUserStore();
                userStore.setUserInfo(rs.data)
                this.$router.push('/')
            }
        }
    }
}
</script>

<style>
.page_index {
    background-color: transparent;
    background-position: center;
    background-size: cover;
    position: relative;
    width: 100%;
    text-align: center;
    height: 100%;
}

.index_banner {
    background: rgba(0, 82, 217, 0.01);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
}

.create_wj {
    background-image: url(footerbg);
    background-size: cover;
    background-position: center;
    width: 100%;
    padding: 100px auto;
}
</style>